<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css" />
		<link rel="stylesheet" href="/css/page42.css" />
		<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
		<script type="text/javascript">	
		</script>
	</head> 
	<body> 
	<div data-role="page">
        <div data-role="header" data-position="inline">
{% ifequal visit_name session_name %}
			<h1>Me</h1>
			<a href="/me_edit?{{uid}}" data-icon="gear" class="ui-btn-left">Edit</a>
			<a href="/me" data-icon="refresh" class="ui-btn-right" data-iconpos="notext" theme="b" data-ajax="false">Refresh</a>
{% else %}
			<h1>Profile</h1>
{% endifequal %}
        </div>
        <div data-role="content">
			{% if pic %}
			<div><img src="{{pic}}" alt="{{visit_name}}"></div><br>
			{% endif %}
			
			<ul data-role="listview" data-inset="false">

				<li>
					<h1>{{visit_name}}</h1>
{% if bio %}
					<p>{{bio}}</p>
{% endif %}
				</li>
				
				<li>
					<img src="../icons/29-heart.png" class="ui-li-icon"/>
					<h3>liked books <span class="ui-li-count">30</span></h3>
				</li>
				{% if web %}
				<li>
					<a href="{{web}}">
						<img src="../icons/53-house.png" class="ui-li-icon"/>
						<h3>{{web}}</h3>
					</a>
				</li>
				{% endif %}
				{% if twitter %}
				<li>
					<a href="http://twitter.com/{{twitter}}">
						<img src="../icons/23-bird.png" class="ui-li-icon"/>
						<h3>@{{twitter}}</h3>
					</a>
				</li>
				{% endif %}
			</ul>
		</div>
    </div>
	</body> 
</html> 
 